<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>


</head>
<body>

<style>

    ul.did {
        list-style-type: none;
    }

    .courseDiv{
        padding-top: 20px;
        width: 100%;

    }
/*课程样式*/
   .courseDiv2{
       display: block;
       float: left;
       width: 100px;
       height: 33px;
       line-height: 33px;
       text-align: center;
       margin-right: 20px;
       border: 1px solid #f1e4d4;
       margin-top: 10px;

   }
/*提示选择样式*/
    .chooseDiv{
        margin-top: 20px;
        font-size: 20px;
        font-size: 16px;
    }
/*按钮样式*/
    .buttonDiv{
        margin-top: 200px;
        text-align: center;

    }
    .buttonDiv button{
        margin-left: 20px;
    }
    .topSpan{
        padding-left: 40px;
    }

</style>
<div class="container">

   <div class="chooseDiv">
       <h4>请点击选择要练习的课程:</h4>
   </div>

    <div class="courseDiv">
        <#list courseList as item>
            <a href="javascript:" id="${item.course_id}" onclick="getCourseId(this)" class="courseDiv2" style="text-decoration: none">${item.course_name}</a>
        </#list>
    </div>

    <div class="buttonDiv">
        <button type="button" class="btn btn-success" onclick="startExer()">开始练习</button>
        <button type="button" id="cancelBtn" class="btn btn-default">点错了</button>
    </div>

</div>

<script type="text/javascript">



    /*选中相应 course时，改变样式点击事件 事件加载*/
    $(function () {
        $(".courseDiv2").click(function () {
            $(this).css("border","1px solid #3096d4");
            $(".courseDiv2").not(this).css("border","1px solid #f1e4d4");
        });
    })
/*获取id*/
    var id ;
    function getCourseId(Obj) {
         id = Obj.id;
    };


    //下一题 开始练习
    function startExer() {
        sessionStorage.setItem("course_id",id);

        //关闭显示 课程 页面
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
        //打开随机练习页面
        parent.layer.open({
            type:2,
            title:'<i class="layui-icon layui-icon-list" style="font-size: 20px; color: #429dd4;"</i> <span style="color:#b5a596;">随机练习</span>',
            fix:true,
            maxmin:false,
            area:['800px','600px'],
            content:'/sj/tosjAll.do',// 显示 随机题目
            end:function () {//结束

            }
        });
    }


    /*点击取消按钮 关闭本弹窗 事件*/
    $("#cancelBtn").on("click", function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);

    })

</script>


</body>
</html>